<!--
 * @Author: hejianbo
 * @Date: 2022-06-09 14:05:07
 * @LastEditors: hejianbo
 * @FilePath: /src/views/components/mt/coms/mt-import-pop/index.vue
 * @Description: 批量导入弹层
-->
<template>
  <el-dialog visible :title="title" width="500px" append-to-body @close="$emit('close')">
    <el-form>
      <slot name="custom"></slot>
      <el-form-item label="Excel:" v-if="!hideTemplate">
        <el-button type="primary" @click="handleDownload">{{downLoadText}}</el-button>
      </el-form-item>

      <el-form-item label="上传Excel:">
        <input :key="fileId" type="file" ref="uploadFile" accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />
      </el-form-item>
    </el-form>
    <slot name="custom2"></slot>
    <span slot="footer">
      <el-button @click="$emit('close')">取消</el-button>
      <el-button type="primary" @click="handleConfirm">保存</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: "mt-import-pop",
  components: {},
  props: {
    hideTemplate: Boolean, // 隐藏下载模板
    title: {
      type: String,
      default: "批量导入",
    },
    downLoadText: {
      type: String,
      default: "下载表格",
    },
  },
  data() {
    return {
      fileId: 1,
    };
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {},
  methods: {
    handleDownload() {
      this.$emit("onDownLoad");
    },
    handleConfirm() {
      const file = this.$refs.uploadFile.files[0];
      if (!file) return this.$message.error("请上传excle表格!");

      let formData = new FormData();
      formData.append("file", file);

      this.$emit("confirm", formData, {
        failHandler: () => {
          this.fileId++;
        },
      });
    },
  },
};
</script>
<style></style>
